<template>
  <div class="countTime" v-html="text"></div>
</template>
<style lang="scss" scope>
.dot{background:#375265;color:#fff;margin:0 .1rem;border-radius:.2rem;padding:.2rem .3rem 0;display:inline-block;vertical-align:middle;text-align:center;}
.dot:first-child{margin-left:0}
.dot:even(){margin-right:.2rem;}
</style>
<script>
    export default {
            props: ['endTime'],
            data() {
                return {
                    day:'',
                    hour:'',
                    min:'',
                    second:'',
                    remainTime:'',
                    text:'',
                    t:''
                }
            },
            mounted(){
              var e = this;
              e.t = window.setInterval(e.timer, 1000);
              //倒计时不走解决方案
              var lastTime = +new Date;                
              window.setInterval(function() {
                if(Math.abs(+new Date - lastTime) > 3000) {
                   e.remainTime = e.remainTime - parseInt(Math.abs(+new Date - lastTime)/1000);
                }
                lastTime = +new Date;
               }, 1000);


            },
            methods: {                 
                timer() {
                  var e= this,
                      now = new Date().getTime(),
                      endDate = new Date(e.endTime).getTime(),
                      lessTime = endDate - now,
                      lesssecond = parseInt(lessTime / 1000);
                      e.remainTime  = lesssecond;
                  if(e.remainTime>0){
                    var day = Math.floor( lesssecond/(60*60*24)),
                        hour = Math.floor( (lesssecond-day*24*60*60)/3600),
                        min = Math.floor((lesssecond-day*24*60*60-hour*3600)/60),
                        second=Math.floor(lesssecond-day*24*60*60-hour*3600-min*60);                    
                        e.day = e.fillZero(day); e.hour = e.fillZero(hour); e.min= e.fillZero(min); 
                        e.second = e.fillZero(second);
                         
                        e.text = e.day+'天'+e.hour+'小时'+e.min+'分后结束';
                  }else {
                      clearInterval(e.t);
                      e.text='已结束';
                  }
                },
                fillZero(n){
                  if(n<10) return '<i class="dot">0</i><i class="dot">'+n+'</i>';
                  else{
                    var tmp = n.toString().split('');
                    return '<i class="dot">'+tmp[0]+'</i><i class="dot">'+tmp[1]+'</i>';
                  };                    
                }                

            }
        }

</script>
